@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300..600&display=swap');

.animated-modal {
  max-width: 100%;
  transform: translateY(-50px);
  transition: all .7s;
  border-radius: 10px;
}

.animated-modal h2{
  transform: translateY(-50px);
  opacity: 0;
  text-align:left;
  transition-property: transform, opacity;
  transition-duration: .4s;
}

.animated-modal p {
  transform: translateY(-50px);
  opacity: 0;
  text-align:left;
  line-height: 15px;
  transition-property: transform, opacity;
  transition-duration: .4s;
  font-family: "Rubik", sans-serif;
	font-size: 15px;
  font-weight: 300;
}

.animated-modal p.rubrique{
  font-weight: 500;
  font-size: 16px;
  padding:20px 0px 2px 0px;
}

.animated-modal p.download{
  padding:20px 0px 2px 0px;
}

.animated-modal a{
  text-decoration: none;
  color: rgb(62,95,104);
  padding-top: 20px;
}

.animated-modal a:hover{
  text-decoration: underline solid rgb(62,95,104);
  text-underline-offset: 3px;
}

/* Final state */
.fancybox-slide--current .animated-modal,
.fancybox-slide--current .animated-modal h2,
.fancybox-slide--current .animated-modal p{
  transform: translateY(0);
  opacity: 1;
}

/* Reveal content with different delays */
.fancybox-slide--current .animated-modal h2 {
  transition-delay: .1s;
}

.fancybox-slide--current .animated-modal p {
  transition-delay: .3s;
}


/*///////// MEDIA SCREEN /////////////*/
@media only screen and (max-width: 601px) {

.animated-modal{
  height: max-content;
}
.animated-modal p {
  line-height: 14px;
	font-size: 13px;
}

.animated-modal p.rubrique{
  font-weight: 500;
  font-size: 14px;
  padding:16px 0px 2px 0px;
}

.animated-modal p.download{
  padding:15px 0px 2px 0px;
}

.animated-modal a{
  padding-top: 15px;
}

}